const path = require("path");
const { merge } = require("webpack-merge");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const commonConfig = require("./common");

module.exports = merge(commonConfig(false), {
  mode: "production",

  plugins: [
    new CleanWebpackPlugin(), // 清理上一次打包的文件

    // 提取 CSS 到独立文件
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash].css", // 使用 contenthash 生成唯一的 CSS 文件名
      chunkFilename: "css/[id].[contenthash].css", // 多入口情况下使用
    }),

    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "../public"), // 源目录：public
          to: path.resolve(__dirname, "../dist"), // 目标目录：dist
          noErrorOnMissing: true, // 如果 public 中有文件不存在，忽略报错
          globOptions: {
            ignore: ["**/index.html"],
          },
        },
      ],
    }),
  ],

  optimization: {
    /**
     * 分包处理
     * 将第三方的文件打包成一个不带文件指纹的文件，便于浏览器缓存
     */
    splitChunks: {
      // chunks: "all", // 拆分所有类型的模块
      // minSize: 30000, // 最小拆分大小为 30KB
      // maxSize: 0, // 不限制最大拆分大小
      cacheGroups: {
        // 第三方库
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors", // 输出文件名
          filename: "vendors/vendors.js", // 自定义输出路径和文件名
          chunks: "all",
          priority: 10, // 高优先级，优先分割 node_modules 中的代码
        },
        // 公共模块
        common: {
          minChunks: 2, // 至少有两个模块共享该模块时才进行分包
          name: "common", // 公共模块的名称
          filename: "common/[name].[contenthash].js", // 自定义输出路径和文件名
          chunks: "all",
          priority: 5,
        },
        // 其他模块（剩余的模块）
        default: {
          minChunks: 2,
          filename: "default/[name].[contenthash].js", // 自定义输出路径和文件名
          chunks: "all",
        },
      },
    },
  },
});
